<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/style copy.css">
    <script src="./JS/scroll.js"></script>
    <title>Document</title>
    <style>
         li {
            margin-right: 100px;
            /* 添加元素间隔 */
        }
        .li1{
            margin-left: 90px;
        }
        .bg1{
            background-image: url(./img/es1.png) ;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .bg2{
            background-image: url(./img/es2.jpg) ;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .bg3{
            background-image: url(./img/es3.png) ;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .op{
            background-color: rgb(255,255,255,0.3);
        }
        .item{
            margin:auto;
        }
        .ul{
           position: absolute;
            top: 200px;
            right: 20px;
 
        }

    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg  bg-light n1">
        <a class="navbar-brand" href="index.html"><img src="img/logo.jpeg" alt="..." height="80px" ></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarNav">
            <ul class="navbar-nav li1">
                <li class="nav-item active ">
                    <a class="nav-link" href="jianjie.html">简介 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="yewu.html">业务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="esg.html">ESG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="yuangong.html">员工</a>
                </li>
            </ul>
        </div>
        <form class="form-inline">
            <span id="username" onblur="user()"></span>
            <a href="denglu.html">登录/注册</a>
        </form>
    </nav>
    <div id="menu" class="ul">
        <ul>
            <li><a href="#item1" class="current">前言</a></li>
            <li><a href="#item2">环境</a></li>
            <li><a href="#item3">社会</a></li>
            <li><a href="#item4">管理</a></li>
            
        </ul>
    </div>
    <div id="item1" class="item"  style=" margin-bottom: 120px;">
        <div>
            <img src="./img/15.png" alt="" class="w-100" height="350px">
        </div>
        <h3 style="text-align: center; margin-top: 50px;">我们相信企业可以提供创新的解决方案来创造社会价值以及服务社会公益。</h3>
        <h4 style="text-align: right; margin-top: 70px;">腾讯联合创始人兼首席执行官马化腾</h4>
    </div>
   
    
    <div class="container">
        <div class="bg1 item" style="height: 400px; width: 900px;" id="item2">
            <h4 style=" text-align: center; font-size: 50px; margin-top: 70px;">环境</h4>
            <p style=" font-size: 30px; margin-top: 50px; width: 400px;" class="op">腾讯努力推动环境保护，在日常运营、员工参与、产品环境责任、公众理念倡导等多个方面取得进展。</p>
        </div>
        <div class="bg2 item" style="height: 400px; width: 900px; margin-top: 120px;" id="item3">
            <h4 style=" text-align: center; font-size: 50px; margin-top: 70px;">社会</h4>
            <p style=" font-size: 30px; margin-top: 50px; width: 400px;" class="op">科技发展一日千里，善用科技将为人类社会带来福祉。在发展同时，腾讯亦须承担相应的技术和产品责任</p>
        </div>
        <div class="bg3 item" style="height: 400px; width: 900px; margin-top: 120px;" id="item4">
            <h4 style=" text-align: center; font-size: 50px; margin-top: 70px;">治理</h4>
            <p style=" font-size: 30px; margin-top: 50px; width: 400px;" class="op">腾讯致力维持最高水平的企业管治，让投资者充分了解集团的管理和发展。我们深信良好的企业管治对我们为股东建立可持续价值至关重要。</p>
        </div>
    </div>
    <div  style="margin-top: 50px; margin-bottom: 10px;">
        <div class="row">
                <ul class="nav" style="margin-left: 150px;">
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;"class="c">加入我们</h4><br><br>
                        <a style="margin-top: 20px;"class="c">校园招聘</a><br><br>
                        <a style="margin-top: 20px;"class="c">社会招聘</a><br><br>
                        <a style="margin-top: 20px;"class="c">国际招聘</a>
                    </li>
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;">联系我们</h4><br><br>
                        <a  href="" class="c">客户服务</a><br><br>
                        <a  href="" class="c">合作洽谈</a><br><br>
                        <a  href="" class="c">腾讯采购</a><br><br>
                        <a href="luyan.html">您的建议</a>
                    </li>
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;">法律信息</h4><br><br>
                        <a href="" class="c">服务协议</a><br><br>
                        <a href="" class="c">隐私政策</a><br><br>
                        <a href="" class="c">知识产权</a>
                    </li>
                    <li>
                        <img src="./img/logo.jpeg" alt="" class="w-100" height="200px">
                    </li>
                </ul>       
        </div>           
    </div>
</body>
</html>